<template>
	<view class="uni-flex-column container">
		<view class="content">
			<view class="goods">
				<view class="uni-flex uni-justify-between top">
					<view class="uni-flex uni-align-center">
						<text class="text1">{{ detailData.title }}</text>
						<text class="text2">{{detailData.orderTypeName}}</text>
					</view>
					<text class="text3">{{detailData.orderStatusName}}</text>
				</view>
				<view class="uni-flex info-box" v-for="(item,index) in detailData.orderServices" :key="index">
					<image :src="item.img" mode="aspectFill"></image>
					<view class="uni-flex-column info">
						<text class="title">{{item.name}}</text>
						<text class="des">{{item.des}}</text>
						<text class="num">{{'x'+item.count}}</text>
					</view>
					<text class="price">{{'¥'+item.priceAmount}}</text>
				</view>
			</view>
			<view class="detail-info">
				<view class="uni-flex uni-justify-between info-item-box">
					<text class="text1">订单编号</text>
					<text class="text2">{{detailData.id||'-'}}</text>
				</view>
				<view class="uni-flex uni-justify-between info-item-box">
					<text class="text1">下单时间</text>
					<text class="text2">{{ detailData.createOrderTime||'-' }}</text>
				</view>
				<!-- <view class="uni-flex uni-justify-between info-item-box">
					<text class="text1">付款时间</text>
					<text class="text2">{{detailData.payMethodName||'-'}}</text>
				</view> -->
				<view class="uni-flex uni-justify-between info-item-box">
					<text class="text1">付款方式</text>
					<text class="text2">{{detailData.payMethodName||'-'}}</text>
				</view>
				<view class="uni-flex uni-justify-between info-item-box">
					<text class="text1">实付金额</text>
					<text class="money">{{'¥'+detailData.paymentAmount||'-'}}</text>
				</view>
			</view>
			<view class="uni-flex-column reason">
				<text class="title">请选择退款原因</text>
				<text class="tip">取消订单后无法回复，钱款及优惠券将原路返</text>
				<view class="box">
					<view v-for="(item, index) in reasonList" :key="item" class="uni-flex uni-align-center reason-item"
						@click="selectReason(index, item)">
						<image
							:src="reasonId === item.id ? `${$ImgBaseUrl}select_active.png` : `${$ImgBaseUrl}select_normal.png`"
							mode="aspectFill"></image>
						<text>{{ item.reason }}</text>
					</view>
				</view>
				<view class="other-reason" v-if="reasonId === 5">
					<uni-easyinput maxlength="300" type="textarea" v-model="remarkContent" placeholder="请输入其他原因" />
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="refund" @click="toRefund">申请退款</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		refundCfg,
		refund,
		orderDetail
	} from "@/api/consumerOrder.js";
	// const reasonList = ["预约时间过长", "服务重复/错误购买", "不想要了", "服务选择错误", "其他原因"];
	// const reasonIndex = ref(-1);
	const reasonId = ref(0);
	const remarkContent = ref("");
	const detailData = ref({})
	// 选择原因
	const selectReason = (index, item) => {
		// reasonIndex.value = index;
		reasonId.value = item.id;
	};

	const orderId = ref("");
	const toRefund = () => {
		uni.showLoading({
			title: "加载中...",
			mask: true
		});
		const params = {
			orderId: orderId.value,
			reasonId: reasonId.value,
			reason: remarkContent.value
		};
		refund(params)
			.then((response) => {
				// console.log(response, "response");
				if (response?.code === 200) {
					uni.showToast({
						title: "申请成功",
						icon: "success"
					});
					
					const refundId = response.data?.id || ""
					setTimeout(() => {
						uni.$emit('refreshOrderList')
						uni.redirectTo({
							url: `/pages/order/consumerOrder/OrderRefundSuccessful?refundId=${refundId}`,
						});
					}, 1500);
				}
			})
			.catch((err) => {
				uni.showToast({
					title: err?.msg || "申请失败",
					icon: "none"
				});
			})
			.finally((res) => {
				uni.hideLoading();
				console.log(res, "res");
			});
	};

	const reasonList = ref([]);
	const refundCfgFn = () => {
		refundCfg().then((response) => {
			console.log(response, "response");
			reasonList.value = response?.data ?? [];
		});
	};
	const getOrderDetail = () => {
		console.log(orderId, orderId.value);
		orderDetail(orderId.value).then((response) => {
			detailData.value = response.data;
		});
	};

	onMounted(() => {
		getOrderDetail();
		refundCfgFn();
	});

	onLoad((option) => {
		orderId.value = option.id;
		console.log(option, "option");
	});
</script>

<style lang="scss" scoped>
	.container {
		background: #f5f5f5;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 24rpx;

		.content {
			flex: 1;
			overflow-y: auto; // 允许滚动

			.goods {
				margin: 0 24rpx;
				padding: 31rpx 39rpx 25rpx 25rpx;
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;

				.top {
					.text1 {
						font-size: 34rpx;
						color: #333333;
						max-width: 300rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.text2 {
						font-weight: 400;
						font-size: 24rpx;
						color: #2f80ed;
						background: #e5f0ff;
						border-radius: 4px;
						padding: 2rpx 9rpx;
						margin-left: 14rpx;
					}




					.text3 {
						font-weight: 500;
						font-size: 34rpx;
						color: #999999;
					}
				}

				.info-box {
					margin-top: 30rpx;

					image {
						width: 137rpx;
						height: 137rpx;
					}

					.info {
						flex: 1;
						margin-left: 24rpx;

						.title {
							font-weight: 500;
							font-size: 34rpx;
							color: #333333;
						}

						.des {
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							margin-top: 5rpx;
						}

						.num {
							font-size: 28rpx;
							color: #666666;
							margin-top: 12rpx;
						}
					}

					.price {
						font-weight: 500;
						font-size: 34rpx;
						color: #333333;
					}
				}
			}

			.detail-info {
				margin: 24rpx 24rpx 0 24rpx;
				padding: 31rpx 39rpx 25rpx 25rpx;
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;

				.info-item-box {
					margin-bottom: 24rpx;

					.text1 {
						font-size: 28rpx;
						color: #666666;
						flex-shrink: 0;
						margin-right: 48rpx;
					}

					.text2 {
						font-size: 28rpx;
						color: #333333;
						margin-left: 48rpx;
					}

					.money {
						font-size: 30rpx;
						color: #ff6a47;
					}
				}
			}

			.reason {
				margin: 24rpx 24rpx;
				padding: 30rpx 52rpx 58rpx 25rpx;
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;

				.title {
					font-weight: 500;
					font-size: 34rpx;
					color: #333333;
				}

				.tip {
					font-size: 24rpx;
					color: #999999;
					margin-top: 16rpx;
				}

				.reason-item {
					margin-top: 24rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 28rpx;
						color: #333333;
					}
				}

				.other-reason {
					margin: 28rpx 0 0 40rpx;
				}
			}
		}

		.bottom {
			background: #fff;
			padding: 20rpx 24rpx;

			.refund {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #2f80ed;
				border-radius: 44px;
				color: white;
				font-size: 30rpx;
			}
		}
	}
</style>